ãŠã§ãã¢ã¯ã»ã·ããªãã£ã®å æ¬çãªã¬ã€ããäžçäžã®ãŠãŒã¶ãŒã®ããã«ã€ã³ã¯ã«ãŒã·ããªããžã¿ã«äœéšãåµé ããããã®ååãã¬ã€ãã©ã€ã³ãæè¡ãããŒã«ã解説ããŸãã
ãŠã§ãã¢ã¯ã»ã·ããªãã£ïŒã°ããŒãã«ãªèŠèŽè ã®ããã®ã€ã³ã¯ã«ãŒã·ããªããžã¿ã«äœéšã®æ§ç¯
仿¥ã®çžäºæ¥ç¶ãããäžçã«ãããŠãã€ã³ã¿ãŒãããã¯æ¥åžžç掻ã«äžå¯æ¬ ãªãã®ãšãªã£ãŠããŸããæ å ±ããµãŒãã¹ãžã®ã¢ã¯ã»ã¹ãããæãã人ãšã®ã€ãªãããŸã§ããŠã§ãã¯æ°ãåããªãã»ã©ã®æ©äŒãæäŸããŠããŸããããããäœçŸäžäººãã®é害ãæã€äººã ã«ãšã£ãŠãããžã¿ã«ç°å¢ã¯ã²ãŒããŠã§ã€ã§ã¯ãªãéå£ãšãªãããšããããŸãããŠã§ãã¢ã¯ã»ã·ããªãã£ã¯ããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãããžã¿ã«ã³ã³ãã³ãããèœåãé害ã«é¢ãããã誰ããå©çšã§ããããã«ããããšãä¿èšŒããŸããããã«ã¯ãèŠèŠãèŽèŠãéåãèªç¥ãèšèªã«é害ã®ããå人ãå«ãŸããŸãã
ãŠã§ãã¢ã¯ã»ã·ããªãã£ãéèŠãªçç±
ãŠã§ãã¢ã¯ã»ã·ããªãã£ã¯ãåã«ã³ã³ãã©ã€ã¢ã³ã¹ã®åé¡ã§ã¯ãããŸãããããã¯ã€ã³ã¯ã«ãŒã·ããã¶ã€ã³ãšå«ççãªéçºã®åºæ¬çãªåŽé¢ã§ããã¢ã¯ã»ã·ããªãã£ãåªå ããããšã§ãçµç¹ã¯ä»¥äžã®ããšãå¯èœã«ãªããŸãã
- ããåºç¯ãªèŠèŽè ã«ãªãŒãïŒäžçäžã§10å人以äžãäœããã®åœ¢ã®é害ãæã£ãŠããŸãããŠã§ããµã€ããã¢ã¯ã»ã·ãã«ã«ããããšã§ãæœåšçãªé¡§å®¢å±€ãšèŠèŽè ãæ¡å€§ã§ããŸãã
- ãã¹ãŠã®ãŠãŒã¶ãŒã®äœéšãåäžïŒæç¢ºãªããã²ãŒã·ã§ã³ãç»åã®ä»£æ¿ããã¹ããªã©ãå€ãã®ã¢ã¯ã»ã·ããªãã£æ©èœã¯ãé害ã®ãããŠãŒã¶ãŒã ãã§ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«å©çããããããŸãã
- SEOã®åŒ·åïŒæ€çŽ¢ãšã³ãžã³ã¯ãæ§é ãè¯ããã»ãã³ãã£ãã¯ã§ãã¢ã¯ã»ã·ãã«ãªãŠã§ããµã€ãã奜ã¿ãŸããã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ã¯ããã°ãã°SEOã®ååãšäžèŽããŸãã
- æ³çèŠä»¶ã®éµå®ïŒå€ãã®åœã§ã¯ãç±³åœã®é害ãæã€ã¢ã¡ãªã«äººæ³ïŒADAïŒãã«ããã®ãªã³ã¿ãªãªå·é害è ã¢ã¯ã»ã·ããªãã£æ³ïŒAODAïŒããšãŒãããã®EN 301 549ãªã©ããŠã§ãã¢ã¯ã»ã·ããªãã£ã矩åä»ããæ³åŸãèŠå¶ããããŸãã
- 瀟äŒçè²¬ä»»ã®æšé²ïŒã¢ã¯ã»ã·ãã«ãªãŠã§ããµã€ããäœæããããšã¯ãå æ¬æ§ãšç€ŸäŒç責任ãžã®ã³ãããã¡ã³ãã瀺ãããšã«ãªããŸãã
Web Content Accessibility Guidelines (WCAG) ã®çè§£
Web Content Accessibility Guidelines (WCAG) ã¯ããŠã§ãã¢ã¯ã»ã·ããªãã£ã«é¢ããåœéçã«èªããããæšæºã§ããWorld Wide Web Consortium (W3C) ã«ãã£ãŠéçºãããWCAGã¯ãé害ãæã€äººã ããŠã§ãã³ã³ãã³ããããã¢ã¯ã»ã·ãã«ã«ããããã®äžé£ã®ã¬ã€ãã©ã€ã³ãæäŸããŸããWCAGã¯ãPOURãšããé åèªã§èŠãããã4ã€ã®åºæ¬ååãäžå¿ã«æ§æãããŠããŸãã
- ç¥èŠå¯èœ (Perceivable): æ å ±ããã³ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ã³ã³ããŒãã³ãã¯ããŠãŒã¶ãŒãç¥èŠã§ããæ¹æ³ã§æç€ºå¯èœã§ãªããã°ãªããŸãããããã«ã¯ãéããã¹ãã³ã³ãã³ãã«ä»£æ¿ããã¹ããæäŸããããšãé³å£°ãåç»ã³ã³ãã³ãã«ãã£ãã·ã§ã³ããã®ä»ã®ä»£æ¿ææ®µãæäŸããããšãã³ã³ãã³ãã容æã«èå¥ã§ããããã«ããããšãå«ãŸããŸãã
- æäœå¯èœ (Operable): ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ã³ã³ããŒãã³ãããã³ããã²ãŒã·ã§ã³ã¯æäœå¯èœã§ãªããã°ãªããŸãããããã«ã¯ããã¹ãŠã®æ©èœãããŒããŒãããå©çšã§ããããã«ããããšããŠãŒã¶ãŒãã³ã³ãã³ããèªã¿ã䜿çšããã®ã«ååãªæéãæäŸããããšãçºäœãåŒãèµ·ããã³ã³ãã³ããé¿ããããšãå«ãŸããŸãã
- çè§£å¯èœ (Understandable): æ å ±ããã³ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®æäœã¯çè§£å¯èœã§ãªããã°ãªããŸãããããã«ã¯ãããã¹ããèªã¿ãããçè§£ããããããããšãã³ã³ãã³ããäºæž¬å¯èœãªæ¹æ³ã§è¡šç€ºã»æäœãããããã«ããããšããŠãŒã¶ãŒãééããåé¿ã»ä¿®æ£ããã®ãå©ããããšãå«ãŸããŸãã
- å ç¢ (Robust): ã³ã³ãã³ãã¯ãæ¯æŽæè¡ãå«ãããŸããŸãªãŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠç¢ºå®ã«è§£éãããã®ã«ååå ç¢ã§ãªããã°ãªããŸãããããã«ã¯ãæå¹ãªHTMLãšCSSã䜿çšããããšãã³ã³ãã³ããçŸåšããã³å°æ¥ã®ãŠãŒã¶ãŒãšãŒãžã§ã³ããšäºææ§ãããããšãä¿èšŒããããšãå«ãŸããŸãã
WCAGã«ã¯ãAãAAãAAAã®3ã€ã®é©åã¬ãã«ããããŸããã¬ãã«Aã¯ã¢ã¯ã»ã·ããªãã£ã®æäœã¬ãã«ã§ãããã¬ãã«AAAã¯æé«ã¬ãã«ã§ããã»ãšãã©ã®çµç¹ã¯ãã¢ã¯ã»ã·ããªãã£ãšå®çŸå¯èœæ§ã®ãã©ã³ã¹ãè¯ããããã¬ãã«AAã®é©åãç®æããŸãã
äž»èŠãªã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé ãšæè¡
ãŠã§ãã¢ã¯ã»ã·ããªãã£ãå®è£ ããã«ã¯ããã¶ã€ã³ãéçºãã³ã³ãã³ãäœæãå«ãå€é¢çãªã¢ãããŒããå¿ èŠã§ãã以äžã¯ããŠã§ããµã€ããã¢ã¯ã»ã·ãã«ã«ããããã®äž»èŠãªèæ ®äºé ãšæè¡ã§ãã
1. éããã¹ãã³ã³ãã³ãã«ä»£æ¿ããã¹ããæäŸãã
ç»åãåç»ãé³å£°ãã¡ã€ã«ãªã©ã®ãã¹ãŠã®éããã¹ãã³ã³ãã³ãã«ã¯ããã®ã³ã³ãã³ããšç®çã説æãã代æ¿ããã¹ããå¿ èŠã§ããããã«ãããã³ã³ãã³ããèŠããèãããã§ããªããŠãŒã¶ãŒããã®æå³ãçè§£ã§ããããã«ãªããŸãã
- ç»åïŒ`alt`屿§ã䜿çšããŠãç»åã®èª¬æçãªããã¹ããæäŸããŸããè£ é£Ÿçãªç»åã«ã¯ã空ã®`alt`屿§ïŒ`alt=""`ïŒã䜿çšããŸããéåžžã«è€éã§è©³çްãªèª¬æãå¿ èŠãªç»åã«ã¯ã`longdesc`屿§ïŒçŸåšã§ã¯ããŸããµããŒããããŠããŸããïŒãæ€èšããŠãã ããã
- åç»ïŒåç»ã«ã¯ãã£ãã·ã§ã³ããã©ã³ã¹ã¯ãªãããé³å£°ã¬ã€ããæäŸããŸãããã£ãã·ã§ã³ã¯é³å£°ãšåæããããã¹ããæäŸãããã©ã³ã¹ã¯ãªããã¯åç»å šäœã®ããã¹ãçãæäŸããŸããé³å£°ã¬ã€ãã¯åç»ã®èŠèŠçèŠçŽ ã説æããŸããYouTubeãVimeoã®ãããªãµãŒãã¹ã¯èªåãã£ãã·ã§ã³æ©èœãæäŸããŠããŸãããæ£ç¢ºæ§ãæãããã«ã¯æåã§ã®ç¢ºèªãšç·šéãäžå¯æ¬ ã§ãã
- é³å£°ïŒé³å£°ãã¡ã€ã«ã«ã¯ãã©ã³ã¹ã¯ãªãããæäŸããŸãã
äŸïŒç»åã®altããã¹ãïŒïŒ
<img src="logo.png" alt="äŒæ¥ã®ã㎠- ã¢ã¯ã»ã·ãã«ãªãŠã§ããµã€ãã®æ§ç¯">
2. ããŒããŒãããã²ãŒã·ã§ã³ã確ä¿ãã
ãŠã§ããµã€ãã®ãã¹ãŠã®æ©èœã¯ããŒããŒãã§ã¢ã¯ã»ã¹ã§ããå¿ èŠããããŸããããã¯ãããŠã¹ããã®ä»ã®ãã€ã³ãã£ã³ã°ããã€ã¹ã䜿çšã§ããªããŠãŒã¶ãŒã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ã¿ãé åºïŒã¿ãã®é åºãè«ççã§çŽæçã§ããããšã確èªããŸãããŠãŒã¶ãŒã¯äºæž¬å¯èœãªæ¹æ³ã§ãŠã§ããµã€ããããã²ãŒãã§ããã¹ãã§ãã`tabindex`屿§ã®äœ¿çšã«ã¯æ³šæãå¿ èŠã§ã誀ã£ã䜿çšã¯ã¢ã¯ã»ã·ããªãã£ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãã
- ãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ïŒãªã³ã¯ããã¿ã³ããã©ãŒã ãã£ãŒã«ããªã©ã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã«ã¯ãæç¢ºãªèŠèŠçãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãæäŸããŸããããã«ããããŠãŒã¶ãŒã¯çŸåšã©ã®èŠçŽ ãéžæãããŠããããçè§£ã§ããŸãã
- ããã²ãŒã·ã§ã³ã®ã¹ããããªã³ã¯ïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒãªã©ã®å埩çãªã³ã³ãã³ãããã€ãã¹ããŠãããŒãžã®ã¡ã€ã³ã³ã³ãã³ãã«çŽæ¥ãžã£ã³ãã§ããã¹ãããããã²ãŒã·ã§ã³ãªã³ã¯ãæäŸããŸãã
äŸïŒããã²ãŒã·ã§ã³ãªã³ã¯ã®ã¹ãããïŒïŒ
<a href="#main-content">ã¡ã€ã³ã³ã³ãã³ããžã¹ããã</a>
<main id="main-content">...</main>
3. ã»ãã³ãã£ãã¯HTMLã䜿çšãã
ã»ãã³ãã£ãã¯HTMLã¯ãHTMLèŠçŽ ã䜿çšããŠã³ã³ãã³ãã®æå³ãšæ§é ãäŒããŸããããã«ãããæ¯æŽæè¡ãã³ã³ãã³ããçè§£ããã¢ã¯ã»ã·ãã«ãªæ¹æ³ã§ãŠãŒã¶ãŒã«æç€ºããã®ã«åœ¹ç«ã¡ãŸãã
- èŠåºãïŒèŠåºãèŠçŽ ïŒ
<h1>ãã<h6>ïŒã䜿çšããŠã³ã³ãã³ããæ§é åããæç¢ºãªéå±€ãäœæããŸãã - ãªã¹ãïŒãªã¹ãèŠçŽ ïŒ
<ul>,<ol>,<li>ïŒã䜿çšããŠã¢ã€ãã ã®ãªã¹ããäœæããŸãã - ã©ã³ãããŒã¯ããŒã«ïŒã©ã³ãããŒã¯ããŒã«ïŒäŸïŒ
<nav>,<main>,<aside>,<footer>ïŒã䜿çšããŠãããŒãžã®ç°ãªãã»ã¯ã·ã§ã³ãèå¥ããŸãã - ARIA屿§ïŒARIAïŒAccessible Rich Internet ApplicationsïŒå±æ§ã䜿çšããŠãèŠçŽ ã®åœ¹å²ãç¶æ ãããããã£ã«é¢ããè¿œå æ å ±ãæäŸããŸããARIAã¯æ§ããã«äœ¿çšããã»ãã³ãã£ãã¯HTMLãè£å®ããããã«å¿ èŠãªå Žåã«ã®ã¿äœ¿çšããŠãã ãããéå°ãªäœ¿çšã¯ã¢ã¯ã»ã·ããªãã£ã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
äŸïŒã»ãã³ãã£ãã¯HTMLïŒïŒ
<header>
<nav>
<ul>
<li><a href="#">ããŒã </a></li>
<li><a href="#">äŒç€ŸæŠèŠ</a></li>
<li><a href="#">ãµãŒãã¹</a></li>
<li><a href="#">ãåãåãã</a></li>
</ul>
</nav>
</header>
<main>
<h1>åœç€Ÿã®ãŠã§ããµã€ããžãããã</h1>
<p>ããã¯ããŒãžã®ã¡ã€ã³ã³ã³ãã³ãã§ãã</p>
</main>
<footer>
<p>Copyright 2023</p>
</footer>
4. ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ãã
ããã¹ããšèæ¯è²ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããæäŸãã匱èŠãè²èŠç°åžžã®ãŠãŒã¶ãŒãããã¹ããèªããããã«ããŸããWCAGã¯ãéåžžã®ããã¹ãã«ã¯å°ãªããšã4.5:1ã倧ããªããã¹ãã«ã¯3:1ã®ã³ã³ãã©ã¹ãæ¯ãèŠæ±ããŠããŸãã
ããŒã«ïŒã«ã©ãŒã³ã³ãã©ã¹ããã§ãã«ãŒã䜿çšããŠãè²ã®çµã¿åãããWCAGã®èŠä»¶ãæºãããŠããããšã確èªããŸããäŸãšããŠãWebAIM Color Contrast CheckerãAccessible ColorsããŒã«ããããŸãã
äŸïŒè¯å¥œãªè²ã®ã³ã³ãã©ã¹ãïŒïŒçœãèæ¯ã«é»ãããã¹ãã¯ãåªããã³ã³ãã©ã¹ããæäŸããŸãã
5. ã³ã³ãã³ããèªã¿ãããçè§£ãããããã
æç¢ºã§ç°¡æœãªèšèã䜿çšããå°éçšèªãæè¡çšèªãé¿ããã³ã³ãã³ããè«ççã§åãããããæ¹æ³ã§æ§æããŸãã
- å¯èªæ§ïŒå¯èªæ§ãã§ãã«ãŒã䜿çšããŠãã³ã³ãã³ãã®èªã¿ããããè©äŸ¡ããŸãã察象èªè ã«é©ããå¯èªæ§ã¬ãã«ãç®æããŸãã
- èšèªïŒå¹³æãªèšèã䜿çšããè€éãªææ§é ãé¿ããŸãã
- æ§æïŒèŠåºããå°èŠåºããç®æ¡æžãã䜿çšããŠã³ã³ãã³ããæŽçããã¹ãã£ã³ããããããŸãã
6. æç¢ºã§äžè²«ããããã²ãŒã·ã§ã³ãæäŸãã
æç¢ºã§äžè²«ããããã²ãŒã·ã§ã³ã¡ãã¥ãŒããã³ãããªã¹ããæ€çŽ¢æ©èœãæäŸããããšã§ããŠãŒã¶ãŒããŠã§ããµã€ããç°¡åã«ããã²ãŒãã§ããããã«ããŸãã
- ããã²ãŒã·ã§ã³ã¡ãã¥ãŒïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®é ç®ã«ã¯ãæç¢ºã§èª¬æçãªã©ãã«ã䜿çšããŸãã
- ãã³ãããªã¹ãïŒãŠãŒã¶ãŒããŠã§ããµã€ãå ã®çŸåšå°ãçè§£ã§ããããã«ãã³ãããªã¹ããæäŸããŸãã
- æ€çŽ¢ïŒãŠãŒã¶ãŒãç¹å®ã®ã³ã³ãã³ããè¿ éã«èŠã€ããããããã«æ€çŽ¢æ©èœãæäŸããŸãã
7. ã¢ã¯ã»ã·ãã«ãªãã©ãŒã ã䜿çšãã
ãã©ãŒã ãã£ãŒã«ãã«æç¢ºãªã©ãã«ãæäŸããé©åãªå ¥åã¿ã€ãã䜿çšããçè§£ãããããšã©ãŒã¡ãã»ãŒãžãæäŸããããšã§ããã©ãŒã ãã¢ã¯ã»ã·ãã«ã«ããŸãã
- ã©ãã«ïŒ
<label>èŠçŽ ã䜿çšããŠãã©ãã«ããã©ãŒã ãã£ãŒã«ãã«é¢é£ä»ããŸãã - å
¥åã¿ã€ãïŒé©åãªå
¥åã¿ã€ãïŒäŸïŒ
text,email,numberïŒã䜿çšããŠãæåŸ ãããå ¥åã«é¢ããã»ãã³ãã£ãã¯ãªæ å ±ãæäŸããŸãã - ãšã©ãŒã¡ãã»ãŒãžïŒãšã©ãŒã®ä¿®æ£æ¹æ³ã説æãããæç¢ºã§æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãã
8. ã¬ã¹ãã³ã·ããã¶ã€ã³ãèšèšãã
ãŠã§ããµã€ããã¬ã¹ãã³ã·ãã§ãããç°ãªãç»é¢ãµã€ãºãããã€ã¹ã«é©å¿ããããšã確èªããŸããããã¯ãã¢ãã€ã«ããã€ã¹ããºãŒã 衚瀺ãå¿ èŠãªæ¯æŽæè¡ã䜿çšããŠãŠã§ããµã€ãã«ã¢ã¯ã»ã¹ãããŠãŒã¶ãŒã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ã¡ãã£ã¢ã¯ãšãªïŒã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãç»é¢ãµã€ãºã«åºã¥ããŠãŠã§ããµã€ãã®ã¬ã€ã¢ãŠããšã¹ã¿ã€ã«ã調æŽããŸãã
- ãã¬ãã·ãã«ã¬ã€ã¢ãŠãïŒç°ãªãç»é¢ãµã€ãºã«é©å¿ãããã¬ãã·ãã«ã¬ã€ã¢ãŠãã䜿çšããŸãã
- ãã¥ãŒããŒãã¡ã¿ã¿ã°ïŒãã¥ãŒããŒãã¡ã¿ã¿ã°ã䜿çšããŠããã©ãŠã¶ãããŒãžãã©ã®ããã«ã¹ã±ãŒãªã³ã°ããããå¶åŸ¡ããŸãã
9. æ¯æŽæè¡ã§ãã¹ããã
ã¹ã¯ãªãŒã³ãªãŒããŒãç»é¢æ¡å€§é¡ãé³å£°èªèãœãããŠã§ã¢ãªã©ã®æ¯æŽæè¡ã§ãŠã§ããµã€ãããã¹ãããé害ãæã€äººã ãå©çšã§ããããšã確èªããŸããããã¯ãã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ãã察åŠããããã®æã广çãªæ¹æ³ã§ãã
- ã¹ã¯ãªãŒã³ãªãŒããŒïŒNVDA (Windows)ãVoiceOver (macOSããã³iOS)ãTalkBack (Android) ãªã©ã®äžè¬çãªã¹ã¯ãªãŒã³ãªãŒããŒã§ãã¹ãããŸãã
- ç»é¢æ¡å€§é¡ïŒç»é¢æ¡å€§é¡ã§ãã¹ãããé«ããºãŒã ã¬ãã«ã§ãã³ã³ãã³ããèªã¿ãããããšã確èªããŸãã
- é³å£°èªèãœãããŠã§ã¢ïŒé³å£°èªèãœãããŠã§ã¢ã§ãã¹ããããŠãŒã¶ãŒãé³å£°ã䜿çšããŠãŠã§ããµã€ããããã²ãŒãããã³æäœã§ããããšã確èªããŸãã
10. 宿çã«ã¢ã¯ã»ã·ããªãã£ãè©äŸ¡ã»ç¶æãã
ãŠã§ãã¢ã¯ã»ã·ããªãã£ã¯ç¶ç¶çãªããã»ã¹ã§ãã宿çã«ãŠã§ããµã€ãã®ã¢ã¯ã»ã·ããªãã£åé¡ãè©äŸ¡ããå¿ èŠãªæŽæ°ãè¡ããæéã®çµéãšãšãã«ã¢ã¯ã»ã·ãã«ã§ããç¶ããããšãä¿èšŒããŸããèªåã¢ã¯ã»ã·ããªãã£ãã¹ãããŒã«ã䜿çšããŠæœåšçãªåé¡ãç¹å®ããŸãããåžžã«èªåãã¹ããæåãã¹ããšãŠãŒã¶ãŒãã£ãŒãããã¯ã§è£å®ããŠãã ããã
- èªåãã¹ãããŒã«ïŒWAVEãAxeãSiteimproveãªã©ã®èªåã¢ã¯ã»ã·ããªãã£ãã¹ãããŒã«ã䜿çšããŠãæœåšçãªã¢ã¯ã»ã·ããªãã£åé¡ãç¹å®ããŸãã
- æåãã¹ãïŒæåãã¹ãã宿œããŠããŠã§ããµã€ããWCAGã®èŠä»¶ãæºãããé害ãæã€äººã ãå©çšã§ããããšã確èªããŸãã
- ãŠãŒã¶ãŒãã£ãŒãããã¯ïŒé害ãæã€ãŠãŒã¶ãŒãããã£ãŒãããã¯ãåããã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ãã察åŠããŸãã
ãŠã§ããµã€ããè¶ ããã¢ã¯ã»ã·ããªãã£ïŒããžã¿ã«è£œåã«ãããã€ã³ã¯ã«ãŒã·ããã¶ã€ã³
ãŠã§ãã¢ã¯ã»ã·ããªãã£ã®ååã¯ããŠã§ããµã€ããè¶ ããŠãã¢ãã€ã«ã¢ããªããœãããŠã§ã¢ã¢ããªã±ãŒã·ã§ã³ãé»åææžãªã©ããã¹ãŠã®ããžã¿ã«è£œåã«åã³ãŸããã€ã³ã¯ã«ãŒã·ããªããžã¿ã«äœéšãåµé ããã«ã¯ãèšèšã»éçºããã»ã¹å šäœãéããŠãã¹ãŠã®ãŠãŒã¶ãŒã®ããŒãºãèæ ®ããå šäœçãªã¢ãããŒããå¿ èŠã§ãã
ã¢ãã€ã«ã¢ããªã®ã¢ã¯ã»ã·ããªãã£
ã¢ãã€ã«ã¢ããªã¯ãç»é¢ãµã€ãºãå°ããããšãã¿ããããŒã¹ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ããã€ãã£ããã©ãããã©ãŒã æ©èœãžã®äŸåã«ãããç¬èªã®ã¢ã¯ã»ã·ããªãã£ã®èª²é¡ãæç€ºããŸããã¢ãã€ã«ã¢ããªã®ã¢ã¯ã»ã·ããªãã£ã確ä¿ããããã«ã¯ïŒ
- ãã€ãã£ãUIèŠçŽ ã䜿çšããïŒãã€ãã£ãUIèŠçŽ ã¯éåžžãã«ã¹ã¿ã ãã«ãã®ã³ã³ããŒãã³ããããã¢ã¯ã»ã·ãã«ã§ãããããå¯èœãªéãæŽ»çšããŸãã
- 代æ¿å ¥åæ¹æ³ãæäŸããïŒã¿ããããŒã¹ã®ãžã§ã¹ãã£ãŒã䜿çšã§ããªããŠãŒã¶ãŒã®ããã«ãé³å£°å¶åŸ¡ãã¹ã€ããã¢ã¯ã»ã¹ãªã©ã®ä»£æ¿å ¥åæ¹æ³ãæäŸããŸãã
- ååãªã¿ããã¿ãŒã²ãããµã€ãºã確ä¿ããïŒã¿ããã¿ãŒã²ãããååã«å€§ããã誀ã£ãŠäœåããªãããã«ååãªééãããããšã確èªããŸãã
- æç¢ºãªèŠèŠçãã¥ãŒãæäŸããïŒæç¢ºãªèŠèŠçãã¥ãŒã䜿çšããŠãUIèŠçŽ ã®ç¶æ ãšæ©èœã瀺ããŸãã
- æ¯æŽæè¡ããµããŒãããïŒã¢ããªãã¹ã¯ãªãŒã³ãªãŒããŒãç»é¢æ¡å€§é¡ãªã©ã®æ¯æŽæè¡ãšäºææ§ãããããšã確èªããŸãã
ãœãããŠã§ã¢ã¢ããªã±ãŒã·ã§ã³ã®ã¢ã¯ã»ã·ããªãã£
ãœãããŠã§ã¢ã¢ããªã±ãŒã·ã§ã³ã¯ãã¹ã¯ãªãŒã³ãªãŒããŒãããŒããŒãããã²ãŒã·ã§ã³ãé³å£°èªèãœãããŠã§ã¢ã䜿çšãããŠãŒã¶ãŒãå«ããé害ãæã€ãŠãŒã¶ãŒã«ã¢ã¯ã»ã·ãã«ã§ããããã«èšèšãããã¹ãã§ãã
- ãã©ãããã©ãŒã ã®ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ã«åŸãïŒãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ãã³ããŒïŒäŸïŒMicrosoft Accessibility Guidelines, Apple Accessibility GuidelinesïŒãæäŸããã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãéµå®ããŸãã
- ã¢ã¯ã»ã·ãã«ãªUIãã¬ãŒã ã¯ãŒã¯ã䜿çšããïŒã¢ã¯ã»ã·ããªãã£æ©èœãçµã¿èŸŒãŸããã¢ã¯ã»ã·ãã«ãªUIãã¬ãŒã ã¯ãŒã¯ãå©çšããŸãã
- ããŒããŒãã¢ã¯ã»ã¹ãæäŸããïŒãã¹ãŠã®æ©èœãããŒããŒãã䜿çšããŠã¢ã¯ã»ã¹ã§ããããšã確èªããŸãã
- ã¹ã¯ãªãŒã³ãªãŒããŒããµããŒãããïŒã¹ã¯ãªãŒã³ãªãŒããŒãã³ã³ãã³ããè§£éããŠãŠãŒã¶ãŒã«æç€ºã§ããããã«ãUIèŠçŽ ã«é¢ããã»ãã³ãã£ãã¯ãªæ å ±ãæäŸããŸãã
- ã«ã¹ã¿ãã€ãºãªãã·ã§ã³ãæäŸããïŒãŠãŒã¶ãŒãåã ã®ããŒãºã«åãããŠã¢ããªã±ãŒã·ã§ã³ã®å€èгãšåäœãã«ã¹ã¿ãã€ãºã§ããããã«ããŸãã
é»åææžã®ã¢ã¯ã»ã·ããªãã£
PDFãWordææžãã¹ãã¬ããã·ãŒããªã©ã®é»åææžã¯ãé害ãæã€ãŠãŒã¶ãŒã«ã¢ã¯ã»ã·ãã«ã§ããããã«èšèšãããã¹ãã§ããããã«ã¯ãç»åã®ä»£æ¿ããã¹ãã®æäŸãé©åãªèŠåºããšæžåŒã®äœ¿çšãææžãã¢ã¯ã»ã·ããªãã£ã®ããã«ã¿ã°ä»ããããŠããããšã®ç¢ºèªãå«ãŸããŸãã
- ã¢ã¯ã»ã·ãã«ãªææžåœ¢åŒã䜿çšããïŒææžã®æ§é ãšå 容ã«é¢ããã»ãã³ãã£ãã¯ãªæ å ±ãæäŸãããã¿ã°ä»ãPDFãªã©ã®ã¢ã¯ã»ã·ãã«ãªææžåœ¢åŒã䜿çšããŸãã
- ç»åã«ä»£æ¿ããã¹ããæäŸããïŒææžå ã®ãã¹ãŠã®ç»åã«ä»£æ¿ããã¹ãã®èª¬æã远å ããŸãã
- é©åãªèŠåºããšæžåŒã䜿çšããïŒé©åãªèŠåºããšæžåŒã䜿çšããŠææžãæ§é åããããã²ãŒãããããããŸãã
- ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ããïŒããã¹ããšèæ¯è²ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ãã䜿çšããŸãã
- æ¯æŽæè¡ã§ãã¹ãããïŒææžãæ¯æŽæè¡ã§ãã¹ãããé害ãæã€ãŠãŒã¶ãŒã«ã¢ã¯ã»ã·ãã«ã§ããããšã確èªããŸãã
ã¢ã¯ã»ã·ãã«ãªæåã®æ§ç¯
çã«ã¢ã¯ã»ã·ãã«ãªããžã¿ã«äœéšãåµé ããã«ã¯ãåã«æè¡çãªã¬ã€ãã©ã€ã³ãå®è£ ããã ãã§ã¯äžååã§ããçµç¹å ã«ã¢ã¯ã»ã·ããªãã£ã®æåãè²ãããšãå¿ èŠã§ããããã«ã¯ãåŸæ¥å¡ã«ã¢ã¯ã»ã·ããªãã£ã«ã€ããŠæè²ããèšèšã»éçºããã»ã¹ã«ã¢ã¯ã»ã·ããªãã£ãçµã¿èŸŒã¿ãé害ãæã€ãŠãŒã¶ãŒãããã£ãŒãããã¯ãåãããšãå«ãŸããŸãã
ã¢ã¯ã»ã·ããªãã£ã®ãã¬ãŒãã³ã°ãšæè²
ãã¶ã€ããŒãéçºè ãã³ã³ãã³ãå¶äœè ããããžã§ã¯ããããŒãžã£ãŒãå«ããã¹ãŠã®åŸæ¥å¡ã«ã¢ã¯ã»ã·ããªãã£ã®ãã¬ãŒãã³ã°ãšæè²ãæäŸããŸãããã®ãã¬ãŒãã³ã°ã§ã¯ããŠã§ãã¢ã¯ã»ã·ããªãã£ã®ååãWCAGã¬ã€ãã©ã€ã³ãã¢ã¯ã»ã·ãã«ãªããžã¿ã«ã³ã³ãã³ããäœæããããã®ãã¹ããã©ã¯ãã£ã¹ãã«ããŒããå¿ èŠããããŸãã
èšèšã»éçºããã»ã¹ãžã®ã¢ã¯ã»ã·ããªãã£ã®çµã¿èŸŒã¿
åæã®èšç»ã»èšèšãããã¹ãã»å±éãŸã§ãèšèšã»éçºããã»ã¹ã®ããããæ®µéã«ã¢ã¯ã»ã·ããªãã£ãçµ±åããŸããããã¯ãã°ãã°ã¢ã¯ã»ã·ããªãã£ã®ãã·ããã¬ããããšåŒã°ããŸããæ©æã«ã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšã§ãã³ã¹ãã®ãããææ»ããé¿ããããžã¿ã«è£œåãæåããã¢ã¯ã»ã·ãã«ã§ããããšãä¿èšŒã§ããŸãã
é害ãæã€ãŠãŒã¶ãŒããã®ãã£ãŒãããã¯ã®èŠè«
é害ãæã€ãŠãŒã¶ãŒããç©æ¥µçã«ãã£ãŒãããã¯ãåããã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ãã察åŠããŸããæ¯æŽæè¡ã䜿çšãã人ã ãšãŠãŒã¶ãŒãã¹ãã宿œããããžã¿ã«è£œåã«é¢ãã圌ãã®äœéšãã貎éãªæŽå¯ãåŸãŸãã
ã¢ã¯ã»ã·ããªãã£ãžã®åãçµã¿ã«é¢ããã°ããŒãã«ãªäºäŸ
äžçäžã§ããŠã§ãã¢ã¯ã»ã·ããªãã£ãšããžã¿ã«ã€ã³ã¯ã«ãŒãžã§ã³ãæšé²ããããŸããŸãªåãçµã¿ãè¡ãããŠããŸãã以äžã«ããã€ãã®äŸãæããŸãã
- ãšãŒãããïŒæ¬§å·ã¢ã¯ã»ã·ããªãã£æ³ïŒEAAïŒã¯ããŠã§ããµã€ããã¢ãã€ã«ã¢ããªãé»åæžç±ãATMãªã©ãå¹ åºã補åãšãµãŒãã¹ã«å¯Ÿããã¢ã¯ã»ã·ããªãã£èŠä»¶ã矩åä»ããŠããŸãã
- ã«ããïŒãªã³ã¿ãªãªå·é害è ã¢ã¯ã»ã·ããªãã£æ³ïŒAODAïŒã¯ããªã³ã¿ãªãªå·ã®çµç¹ã«å¯ŸãããŠã§ããµã€ããšããžã¿ã«ã³ã³ãã³ããé害ãæã€äººã ãå©çšã§ããããã«ããããšãèŠæ±ããŠããŸãã
- ãªãŒã¹ãã©ãªã¢ïŒé害è å·®å¥çŠæ¢æ³ïŒDDAïŒã¯ããªã³ã©ã€ã³ç°å¢ãå«ããé害ãæã€äººã ã«å¯Ÿããå·®å¥ãçŠæ¢ããŠããŸãããªãŒã¹ãã©ãªã¢äººæš©å§å¡äŒã¯ããŠã§ãã¢ã¯ã»ã·ããªãã£ã«é¢ããã¬ã€ãã³ã¹ãæäŸããŠããŸãã
- æ¥æ¬ïŒæ¥æ¬ç£æ¥èŠæ ŒïŒJISïŒã«ã¯ããŠã§ããµã€ããæ å ±æè¡æ©åšã«é¢ããã¢ã¯ã»ã·ããªãã£èŠæ Œãå«ãŸããŠããŸãã
- ã€ã³ãïŒ2016幎ã®éå®³è æš©å©æ³ã¯ãããžã¿ã«é åãå«ããé害ãæã€äººã ã®ã¢ã¯ã»ã·ããªãã£ãšã€ã³ã¯ã«ãŒãžã§ã³ãæšé²ããŠããŸãã
ãŠã§ãã¢ã¯ã»ã·ããªãã£ã®ããã®ããŒã«ãšãªãœãŒã¹
ã¢ã¯ã»ã·ãã«ãªããžã¿ã«äœéšãäœæããã®ã«åœ¹ç«ã€å€æ°ã®ããŒã«ãšãªãœãŒã¹ãå©çšå¯èœã§ãã
- ã¢ã¯ã»ã·ããªãã£ãã¹ãããŒã«ïŒWAVE, Axe, Siteimprove, Tenon.io
- ã«ã©ãŒã³ã³ãã©ã¹ããã§ãã«ãŒïŒWebAIM Color Contrast Checker, Accessible Colors
- ã¹ã¯ãªãŒã³ãªãŒããŒïŒNVDA (Windows), VoiceOver (macOS and iOS), TalkBack (Android)
- WebAIMïŒãŠã§ãã¢ã¯ã»ã·ããªãã£ã®æ å ±ãšãã¬ãŒãã³ã°ã«é¢ããäž»èŠãªãªãœãŒã¹ã
- W3C Web Accessibility Initiative (WAI)ïŒWCAGãéçºããçµç¹ã
- Deque SystemsïŒã¢ã¯ã»ã·ããªãã£ãã¹ãããŒã«ãšã³ã³ãµã«ãã£ã³ã°ãµãŒãã¹ãæäŸã
- Level AccessïŒã¢ã¯ã»ã·ããªãã£ãœãªã¥ãŒã·ã§ã³ãšãµãŒãã¹ãæäŸã
çµè«
ãŠã§ãã¢ã¯ã»ã·ããªãã£ã¯åãªãæè¡çãªèŠä»¶ã§ã¯ãããŸãããããã¯ã€ã³ã¯ã«ãŒã·ããã¶ã€ã³ã®åºæ¬ååã§ãããããå ¬å¹³ã§ã¢ã¯ã»ã¹ããããããžã¿ã«äžçãåµé ããããã®éèŠãªåŽé¢ã§ãããŠã§ãã¢ã¯ã»ã·ããªãã£ãåãå ¥ããããšã§ãçµç¹ã¯ããåºç¯ãªèŠèŽè ã«ãªãŒããããã¹ãŠã®ãŠãŒã¶ãŒã®äœéšãåäžãããæ³çèŠä»¶ãéµå®ãã瀟äŒçè²¬ä»»ãæšé²ããããšãã§ããŸããWCAGã®ååãçè§£ãå®è£ ããæ¯æŽæè¡ã§ãã¹ãããã¢ã¯ã»ã·ããªãã£ã®æåãè²ãããšã§ãããªãã®ãŠã§ããµã€ããšããžã¿ã«ã³ã³ãã³ãããèœåãé害ã«é¢ãããã誰ããå©çšã§ããããã«ããããšãã§ããŸããã¢ã¯ã»ã·ããªãã£ãåªå ããããšã®ã°ããŒãã«ãªåœ±é¿ã¯å€§ãããäžçäžã®åäººã«æ©äŒãåµé ããåãäžããŸãã